<template>
    <AppTopNav />
    <AppHeader />
    <AppHeaderSticky />
    <div class="main">
        <router-view />
    </div>
    <footer>底部组件</footer>
    <button @click="login">登录</button>
    <button @click="logout">登出</button>
</template>

<script>
import AppTopNav from '@/components/AppTopNav.vue'
import AppHeader from '@/components/AppHeader.vue'
import AppHeaderSticky from '@/components/AppHeaderSticky.vue'
import { SET_USER_INFO } from '@/store/user/actionsType'
import { SET_CATEGORY_INFO } from '@/store/category/actionsType'
import { useStore } from 'vuex'


export default {
    name: 'Layout',
    components: {
    AppTopNav,
    AppHeader,
    AppHeaderSticky
},
    setup() {
        const store = useStore()
        store.dispatch(SET_CATEGORY_INFO)

        function login() {
            store.dispatch(SET_USER_INFO, { token: '8888', userName: '林俊杰' })
        }

        function logout() {
            store.dispatch(SET_USER_INFO, {})
        }
        return {
            login,
            logout
        }
    }
}
</script>
<style lang="less" scoped>
</style>